<html lang='zh-CN'>
        <head >
        <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title >登录页面</title>
<script src='https://res.gemcoder.com/js/reload.js'></script>
<script src='https://cdn.tailwindcss.com'></script>
<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
    </head>
<body class='bg-gray-100 min-h-screen flex items-center justify-center p-4'>
        <div class='bg-white rounded-lg shadow-xl overflow-hidden max-w-5xl w-full flex flex-col md:flex-row'>
        <!-- 左侧：微信扫码登录 -->
<div class='w-full md:w-1/2 bg-gradient-to-br from-white to-gray-100 text-gray-800 p-8 flex flex-col items-center justify-center border-r border-gray-200'>
        <h2 class='text-2xl font-bold mb-6'>
        微信扫码登录
    </h2>
<div class='bg-gray-50 border border-gray-200 p-6 rounded-lg mb-6 w-56 h-56 flex items-center justify-center' data-yteditvalue='二维码' style='left:0px;position:relative;color:#000000FF;'>
        二维码
    </div>
<p class='text-gray-500 text-sm text-center'>
        请使用微信扫描二维码登录
    </p>
    </div>
<!-- 右侧：手机号登录 -->
<div class='w-full md:w-1/2 p-8 md:p-12 flex flex-col'>
        <h2 class='text-2xl font-bold mb-8 text-blue-800'>
        手机号登录
    </h2>
<!-- 手机号输入 -->
<div class='mb-6 relative'>
        <div class='flex items-center border-b border-blue-200 pb-2 focus-within:border-blue-500 transition-colors'>
        <div class='mr-4 text-gray-500'>
        +86
    </div>
<input class='flex-1 outline-none text-gray-700 text-base' id='phone' maxlength='11' placeholder='请输入手机号' type='tel'/>
    </div>
<p class='text-red-500 text-xs mt-1 hidden' id='phone-error'>
        请输入正确的手机号
    </p>
    </div>
<!-- 验证码输入 -->
<div class='mb-8 relative'>
        <div class='flex items-center border-b border-blue-200 pb-2 focus-within:border-blue-500 transition-colors'>
        <input class='flex-1 outline-none text-gray-700 text-base' id='code' maxlength='6' placeholder='请输入短信验证码' type='text'/>
<button class='ml-4 px-3 py-1 bg-blue-100 text-blue-700 rounded text-sm hover:bg-blue-200 transition-colors' id='get-code'>
        获取验证码
    </button>
    </div>
<p class='text-red-500 text-xs mt-1 hidden' id='code-error'>
        请输入正确的验证码
    </p>
    </div>
<a class='yt-a-defalut-link w-full py-3 bg-gradient-to-r from-blue-600 to-teal-500 text-white rounded-lg font-medium hover:from-blue-700 hover:to-teal-600 transition-all duration-300 mb-6 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg transform hover:-translate-y-0.5 flex' target='_top' is-page='true' href='javascript:void(0);' custom-href='w=1082&h=783&appuuid=1952252503550590976&version=1&pageType=web&uuid=1952258497391362048&appName=原型设计' onclick='
          const parseWithURLSearchParams = (queryString) => {
            const params = queryString.split("&")
            const result = {}
            params.forEach(param => {
              const key = param.split("=")[0]
              const value = param.split("=")[1]
              result[key] = value
            })
            return result
          }
          const topWin = window.top
          const originParams = parseWithURLSearchParams(topWin.document.location.href.split("?")[1])
          const href = this.getAttribute("custom-href")
          if (href) {
            if (topWin.location.hash.startsWith("#/edit?")) {
              const { uuid } = parseWithURLSearchParams(href)
              const event = new CustomEvent("changePage", {
                detail: { uuid },
                bubbles: true,
                cancelable: true
              });
              topWin.dispatchEvent(event)
            } else {
              const newParams = parseWithURLSearchParams(href)
              const event = new CustomEvent("previewPageVersion", {
                detail: {
                  appuuid: newParams?.appuuid,
                  pageUuid: newParams?.uuid,
                  callback: (version) => {
                    const params = Object.keys(originParams).reduce((acc, key) => {
                      if (acc !== "?") {
                        acc+="&"
                      }
                      if (key === "version") {
                        acc+=key+"="+version
                      } else {
                        acc+=key+"="+newParams[key]
                      }
                      return acc
                    }, "?")
                    topWin.location.href = topWin.document.location.href.split("?")[0] + params
                  }
                },
                bubbles: true,
                cancelable: true
              });
              topWin.dispatchEvent(event)
            }
          }
        ' custom-a='true' is-add='true' style='padding: 0px; border: 0px; box-shadow: none;'>
        <button class='w-full py-3 bg-gradient-to-r from-blue-600 to-teal-500 text-white rounded-lg font-medium hover:from-blue-700 hover:to-teal-600 transition-all duration-300 mb-6 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg transform hover:-translate-y-0.5' id='login-btn' data-selectorname='#login-btn' style>
        登录
    </button>
    </a>
<!-- 协议勾选 -->
<div class='flex items-center mt-auto'>
        <input class='mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-blue-300 rounded' id='agreement' type='checkbox'/>
<label class='text-gray-500 text-sm' for='agreement'>
        勾选即代表您阅读并同意
<a class='text-blue-600 hover:underline' href='javascript:void(0);'>
        《用户协议》
    </a>
与
<a class='text-blue-600 hover:underline' href='javascript:void(0);'>
        《隐私政策》
    </a>
    </label>
    </div>
    </div>
    </div>
<script >// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function () {
  var phoneInput = document.getElementById('phone');
  var codeInput = document.getElementById('code');
  var getCodeBtn = document.getElementById('get-code');
  var loginBtn = document.getElementById('login-btn');
  var agreementCheckbox = document.getElementById('agreement');
  var phoneError = document.getElementById('phone-error');
  var codeError = document.getElementById('code-error');

  // 初始状态下登录按钮禁用
  loginBtn.disabled = true;

  // 手机号验证
  function validatePhone() {
    var phone = phoneInput.value.trim();
    var phoneReg = /^1[3-9]\d{9}$/;
    if (!phone) {
      phoneError.textContent = '请输入手机号';
      phoneError.classList.remove('hidden');
      return false;
    } else if (!phoneReg.test(phone)) {
      phoneError.textContent = '请输入正确的手机号';
      phoneError.classList.remove('hidden');
      return false;
    } else {
      phoneError.classList.add('hidden');
      return true;
    }
  }

  // 验证码验证
  function validateCode() {
    var code = codeInput.value.trim();
    var codeReg = /^\d{6}$/;
    if (!code) {
      codeError.textContent = '请输入验证码';
      codeError.classList.remove('hidden');
      return false;
    } else if (!codeReg.test(code)) {
      codeError.textContent = '请输入6位数字验证码';
      codeError.classList.remove('hidden');
      return false;
    } else {
      codeError.classList.add('hidden');
      return true;
    }
  }

  // 检查是否可以启用登录按钮
  function checkLoginButton() {
    var isPhoneValid = validatePhone();
    var isCodeValid = validateCode();
    var isAgreementChecked = agreementCheckbox.checked;
    loginBtn.disabled = !(isPhoneValid && isCodeValid && isAgreementChecked);
  }

  // 手机号输入事件
  phoneInput.addEventListener('input', function () {
    validatePhone();
    checkLoginButton();
  });

  // 验证码输入事件
  codeInput.addEventListener('input', function () {
    validateCode();
    checkLoginButton();
  });

  // 协议勾选事件
  agreementCheckbox.addEventListener('change', checkLoginButton);

  // 获取验证码按钮点击事件
  getCodeBtn.addEventListener('click', function () {
    if (!validatePhone()) return;

    // 倒计时功能
    var countdown = 60;
    getCodeBtn.disabled = true;
    getCodeBtn.textContent = "".concat(countdown, "s\u540E\u91CD\u65B0\u83B7\u53D6");
    getCodeBtn.classList.add('bg-blue-300');
    getCodeBtn.classList.remove('bg-gray-200', 'hover:bg-gray-300');
    var timer = setInterval(function () {
      countdown--;
      getCodeBtn.textContent = "".concat(countdown, "s\u540E\u91CD\u65B0\u83B7\u53D6");
      if (countdown <= 0) {
        clearInterval(timer);
        getCodeBtn.disabled = false;
        getCodeBtn.textContent = '获取验证码';
        getCodeBtn.classList.remove('bg-indigo-300');
        getCodeBtn.classList.add('bg-blue-100', 'hover:bg-blue-200');
      }
    }, 1000);

    // 这里可以添加发送验证码的AJAX请求
    console.log('发送验证码到:', phoneInput.value);
  });

  // 登录按钮点击事件
  loginBtn.addEventListener('click', function () {
    if (!checkLoginButton()) return;

    // 这里可以添加登录的AJAX请求
    console.log('登录信息:', {
      phone: phoneInput.value,
      code: codeInput.value,
      agreeAgreement: agreementCheckbox.checked
    });
    alert('登录成功！');
  });
});</script>
    </body>
    </html>